<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Page as Tree</title>

    <style type="text/css">
        div {
            border: 1px solid #000;
            padding: 5px;
        }
    </style>

    <script type="text/javascript">
    //<![CDATA[
        var highlightColor = "#ffff00";

        function changeColor() {
            highlightColor = prompt("Enter highlight color (hexidecimal format)", highlightColor);
        }

        function loadPage() {
            var pageURL = prompt("Enter page in this domain", "");
            top.docin.location.href = pageURL;  
        }

        function highlightElements() {
            var elemTag = prompt("Enter tag element name to highlight: ", "p");
            var nodes = top.docin.document.getElementByTagName(elemTag); 

            for(var i=0; i<nodes.length; i++) {
                var mynode = nodes[i];
                mynode.style.backgroundColor = highlightColor;
            }
        }

        window.onload = function() {
            
        }

    //]]>

    </script>
    
</head>
<body>
    <div onclick="changeColor()">
        <p> Click to change highlight color </p>
    </div>

    <div onclick="loadPage()">
        <p> Click to load source page </p>
    </div>

    <div onclick="highlightElements()">
        <p> Click to search for, and highlight, a specific tag</p>
    </div>
</body>
</html>
